<template>
  <van-popup
    style="
      top: 0.9rem;
      transform: translate3d(-50%, 0, 0);
      border-radius: 0.16rem 0.16rem 0 0;
    "
    v-model:show="show"
    :close-on-click-overlay="false"
    teleport="body"
  >
    <div class="modal">
      <img
        class="modal-close"
        src="../../assets/images/Modal/rules/rules_close.png"
        @click="close"
      />
      <div class="modal-title">
        <img src="../../assets/images/Modal/rules/rules_left.png" />
        <p>{{ $t("Rules") }}</p>
        <img src="../../assets/images/Modal/rules/rules_right.png" />
      </div>
      <div class="modal-wrapper" :style="`padding-bottom: ${pdb}rem`">
        <div class="modal-title2">Invite frends, earn money no limits</div>
        <img
          src="../../assets/images/Modal/rules/rules_title.png"
          class="modal-title-img"
        />
        <div class="modal-invite">
          <span></span>
          <p>How to get invite Reward</p>
          <span></span>
        </div>
        <div
          class="x width"
          style="margin-bottom: 0.3rem; padding-right: 0.12rem"
        >
          <img
            src="../../assets/images/Modal/rules/rules_invite1.png"
            style="width: 1.59rem; height: 1.69rem; margin: 0 0.03rem 0 0.2rem"
          />
          <div>
            <div class="modal-step">{{ $t("step") }}1</div>
            <p class="modal-invite-msg">
              {{ $t("Click to share") }}
            </p>
          </div>
        </div>
        <div
          class="x width"
          style="padding-right: 0.12rem; margin-bottom: 0.6rem"
        >
          <img
            src="../../assets/images/Modal/rules/rules_invite2.png"
            style="width: 1.59rem; height: 1.69rem; margin: 0 0.03rem 0 0.2rem"
          />
          <div>
            <div class="modal-step">{{ $t("step") }}2</div>
            <p class="modal-invite-msg">
              {{
                $t("Friends downloads & install from invite link.You will get")
              }}
              <img class="icon_coin" src="../../assets/images/icon_coin.svg" />
              <span class="gold">100</span>
            </p>
          </div>
        </div>
        <div
          class="x width"
          style="padding-right: 0.12rem; margin-bottom: 0.24rem"
        >
          <img
            src="../../assets/images/Modal/rules/rules_invite3.png"
            style="width: 1.68rem; height: 1.39rem; margin: 0 0.03rem 0 0.1rem"
          />
          <div>
            <div class="modal-step">{{ $t("step") }}3</div>
            <p class="modal-invite-msg">
              {{ $t("When friends complete the tasks, you will get") }}
              <span class="gold">10%</span>
              <img class="icon_coin" src="../../assets/images/icon_coin.svg" />
              {{ $t("coins rewards of what he got") }}
            </p>
          </div>
        </div>
        <div class="x width" style="padding-right: 0.12rem">
          <img
            src="../../assets/images/Modal/rules/rules_invite4.png"
            style="width: 1.54rem; height: 2.3rem; margin: 0 0.18rem 0 0.1rem"
          />
          <div>
            <div class="modal-step">{{ $t("step") }}4</div>
            <p class="modal-invite-msg">
              {{
                $t(
                  "As friends invited by you continue to invite theirs, you will get extra"
                )
              }}
              <span class="gold">5%</span>
              <img class="icon_coin" src="../../assets/images/icon_coin.svg" />
              {{ $t("coins rewards when their friends complete the tasks") }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </van-popup>
</template>
<script>
import { inject, computed } from "vue";
export default {
  props: ["show", "option"],
  setup(props, ctx) {
    const vueState = inject("vueState");
    let pdb = computed(() => vueState.pageStyle.tabBarHeight / 100 || 0 + 0.2);
    const close = () => {
      ctx.emit("update:show", false);
    };
    const submit = () => {
      ctx.emit("submit", props.option.coin);
    };
    return {
      vueState,
      close,
      submit,
      pdb,
    };
  },
};
</script>
<style lang="less" scoped>
.x {
  display: flex;
  justify-content: flex-start;
}
.x1 {
  display: flex;
  justify-content: center;
}
.y {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
}
.aic {
  align-items: center;
}
.width {
  width: 100%;
}
.modal {
  width: 3.43rem;
  background-color: white;
  overflow: hidden;
  position: relative;
  padding-top: 0.1rem;
  .y;
  .aic;
  &-close {
    width: 0.3rem;
    height: 0.3rem;
    position: absolute;
    right: 0.1rem;
    top: 0.1rem;
  }
  &-wrapper {
    overflow: auto;
    max-height: calc(100vh - 1.64rem);
  }
  &-title {
    height: 0.64rem;
    .x1;
    .aic;
    p {
      font-size: 0.5rem;
      font-weight: 500;
      color: #f99f02;
      letter-spacing: 0px;
      margin: 0 0.12rem;
    }
    img {
      width: 0.43rem;
      height: 0.28rem;
    }
  }
  &-title2 {
    font-size: 0.2rem;
    font-weight: 500;
    color: #005352;
    line-height: 0.32rem;
    letter-spacing: 0px;
    text-align: center;
  }
  &-title-img {
    width: 3.33rem;
    height: 1.8rem;
    margin: 0.2rem 0.05rem 0.16rem;
  }
  &-invite {
    height: 0.2rem;
    margin-bottom: 0.16rem;
    .x1;
    .aic;
    p {
      font-size: 0.18rem;
      font-weight: 700;
      color: #006559;
      margin: 0 0.03rem;
    }
    span {
      width: 0.35rem;
      height: 1px;
      opacity: 1;
      background: #f99f02;
    }
  }
  &-step {
    .x1;
    .aic;
    height: 0.3rem;
    background: #0bab79;
    border-radius: 0.15rem;
    font-size: 0.18rem;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 0px;
    padding: 0 0.16rem;
    margin-bottom: 0.08rem;
    width: fit-content;
  }
  &-invite-msg {
    font-size: 0.14rem;
    font-weight: 400;
    color: #333333;
    line-height: 0.24rem;
    letter-spacing: 0px;
    width: 100%;
  }
  .icon_coin {
    width: 0.15rem;
    height: 0.15rem;
    vertical-align: middle;
  }
  .gold {
    color: #f99f02;
  }
}
</style>
